<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>饿了么</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrapper">
        <header>
            <div class="header_content">
                <span class="header_content_span">南通大学</span>
            </div>
        </header>
        <div class="searcher">
            <div class="search">
                <a href="http://www.baidu.com" class="content">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 
                        1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 
                        1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 
                        0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 
                        1.326-.1a.739.739 0 0 
                        1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39
                         6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8
                          6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z"></path>
                    </svg>
                    <span>搜索饿了么商家、商品名称</span>
                </a>
            </div>
        </div>
        <div class="advertise">
            <div class="advertise_img">
                <div class="img">
                    <img src="https://fuss10.elemecdn.com/0/e7/64044fb6df771e9cb42196ae3eeeejpeg.jpeg?imageMogr/format/webp/">
                </div>
            </div>
        </div>
        <div class="recommend">
            <div class="food">
                <div class="foot_care">
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                    <a href="http://www.baidu.com">
                        <div class="continer">
                            <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
                        </div>
                        <span class="title">美食</span>
                    </a>
                </div>
            </div>
            <div class="dot">
                <div class="dot_care">。</div>
                <div class="dot_care">。</div>
            </div>
        </div>
        <div class="show">
            <div class="show_care">
                <div class="show_vare_min">
                    <div class="taocon">
                        <h3 class="title1">
                            品质套餐
                        </h3>
                        <div class="title2">
                            搭配齐全吃得好
                        </div>
                        <div class="title3">
                            立即抢购
                        </div>
                        <img src="https://fuss10.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?imageMogr/format/webp/thumbnail/!282x188r/gravity/Center/crop/282x188/"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="shoplist_title">
            推荐商家
        </div>
        <div class="shoplist">
            <div class="shoplistcon">
                <div class="dian">
                    <div class="logo">
                        <div class="logo_care">
                            <img src="https://fuss10.elemecdn.com/9/3d/22878a008a0ead0d9b13895a73869jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/"
                                alt="" class="logo_care_img">
                        </div>
                    </div>
                    <div class="name">
                        <div class="name1">
                            <h3 class="name1_text">
                                <span>哈姆特。哈大鸡排</span>
                            </h3>
                        </div>
                        <div class="name1">
                            <div class="pingjia">
                                <div class="pingjia_img">
                                    <img src=""
                                        alt="" style="    width: 14.933333vw;    height: 2.666667vw;">
                                </div>
                                <span style="margin-left:0 1.066667vw;font-size: .293333rem;margin-left:2vw">
                                    4.5
                                </span>
                                <span style="font-size: .293333rem;margin-left:2vw;">
                                    月售两笔
                                </span>
                            </div>
                        </div>
                        <div class="name1">
                            <span style="font-size: .293333rem;">
                                50起送|配送十元

                            </span>
                        </div>
                    </div>
                </div>
                <div class="int">

                </div>
            </div>
            <div class="shoplistcon">
                    <div class="dian">
                        <div class="logo">
                            <div class="logo_care">
                                <img src="https://fuss10.elemecdn.com/9/3d/22878a008a0ead0d9b13895a73869jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/"
                                    alt="" class="logo_care_img">
                            </div>
                        </div>
                        <div class="name">
                            <div class="name1">
                                <h3 class="name1_text">
                                    <span>哈姆特。哈大鸡排</span>
                                </h3>
                            </div>
                            <div class="name1">
                                <div class="pingjia">
                                    <div class="pingjia_img">
                                        <img src=""
                                            alt="" style="    width: 14.933333vw;    height: 2.666667vw;">
                                    </div>
                                    <span style="margin-left:0 1.066667vw;font-size: .293333rem;margin-left:2vw">
                                        4.5
                                    </span>
                                    <span style="font-size: .293333rem;margin-left:2vw;">
                                        月售两笔
                                    </span>
                                </div>
                            </div>
                            <div class="name1">
                                <span style="font-size: .293333rem;">
                                    50起送|配送十元
    
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="int">
    
                    </div>
                </div>
                <div class="shoplistcon">
                        <div class="dian">
                            <div class="logo">
                                <div class="logo_care">
                                    <img src="https://fuss10.elemecdn.com/9/3d/22878a008a0ead0d9b13895a73869jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/"
                                        alt="" class="logo_care_img">
                                </div>
                            </div>
                            <div class="name">
                                <div class="name1">
                                    <h3 class="name1_text">
                                        <span>哈姆特。哈大鸡排</span>
                                    </h3>
                                </div>
                                <div class="name1">
                                    <div class="pingjia">
                                        <div class="pingjia_img">
                                            <img src=""
                                                alt="" style="    width: 14.933333vw;    height: 2.666667vw;">
                                        </div>
                                        <span style="margin-left:0 1.066667vw;font-size: .293333rem;margin-left:2vw">
                                            4.5
                                        </span>
                                        <span style="font-size: .293333rem;margin-left:2vw;">
                                            月售两笔
                                        </span>
                                    </div>
                                </div>
                                <div class="name1">
                                    <span style="font-size: .293333rem;">
                                        50起送|配送十元
        
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="int">
        
                        </div>
                    </div>
                    <div class="shoplistcon">
                            <div class="dian">
                                <div class="logo">
                                    <div class="logo_care">
                                        <img src="https://fuss10.elemecdn.com/9/3d/22878a008a0ead0d9b13895a73869jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/"
                                            alt="" class="logo_care_img">
                                    </div>
                                </div>
                                <div class="name">
                                    <div class="name1">
                                        <h3 class="name1_text">
                                            <span>哈姆特。哈大鸡排</span>
                                        </h3>
                                    </div>
                                    <div class="name1">
                                        <div class="pingjia">
                                            <div class="pingjia_img">
                                                <img src=""
                                                    alt="" style="    width: 14.933333vw;    height: 2.666667vw;">
                                            </div>
                                            <span style="margin-left:0 1.066667vw;font-size: .293333rem;margin-left:2vw">
                                                4.5
                                            </span>
                                            <span style="font-size: .293333rem;margin-left:2vw;">
                                                月售两笔
                                            </span>
                                        </div>
                                    </div>
                                    <div class="name1">
                                        <span style="font-size: .293333rem;">
                                            50起送|配送十元
            
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
        </div>
        <div class="footer">
            <div class="footer_care">
                <div>首页</div>
                <div>发现</div>
                <div>订单</div>
                <div>我的</div>
            </div>
        </div>
    </div>
    <script src="./template-web.js"></script>
    <script id="elm" type="text/html">
        {{each list value i}}
       
        <a href= "www.baidu.com">
                <div class="continer">
                     <img src="{{value.url}}">
                </div>
                <span class="title">
                    {{value.name}}
                </span>
        </a>

      
        {{/each}}
       
    </script>
    <script>
        // <li>{{value}}</li>
        // <a href="http://www.baidu.com">
        //     <div class="continer">
        //         <img src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/">
        //     </div>
        //     <span class="title">美食</span>
        // </a>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status >= 200 && this.status < 300) {
                var data = JSON.parse(this.responseText);
                var html = template('elm', data);
                document.getElementsByClassName("foot_care")[0].innerHTML = html;
                console.log(html);

            }
        }
    };
    xhr.open("GET","./index.json",true);
    xhr.send();
    
    </script>
</body>

</html>